<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import UploadPhoto from '@/components/UploadPhoto.vue';

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const mode = ref('default')

// 工具栏的配置
const toolbarConfig = {}
const editorConfig = {
    placeholder: '请输入内容...',
    MENU_CONF: {}
}

let is_show = ref(false)
editorConfig.MENU_CONF['uploadImage'] = {
    // 上传图片的配置
    customBrowseAndUpload(insertFn) {
        // 自己选择文件
        is_show.value = true;
    }
}

let editorData = ref(null)
let handleImgUrl = (data) => {
    let node = {
        type: 'image',
        src: data,
        style: { width: '', height: '' },
        children: [{ text: '' }],
    };
    if (node.src) {
        editorData.value.editor.insertNode(node);
    }
    is_show.value = false;
}


// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

import { computed } from 'vue';
let props = defineProps({
    modelValue: {
        type: String,
        required: true,
    },
    action: {
        type: String,
        default: 'http://www.shop.net/adminapi/file/upload',
    },
});
let emit = defineEmits(['update:modelValue']);

let valueHtml = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        emit('update:modelValue', value)
    }
})

let headers = ref({})
onMounted(() => {
    headers.value = { 'Authori-zation': sessionStorage.token };
})

// 处理WangEditor的初始化问题
import { Boot } from '@wangeditor/editor';
// editor为空获取value值存在"<p><br></p>"，在表单中无法校验，借助于插件解决
function withEmptyHtml(editor) {
    const { getHtml } = editor
    const newEditor = editor
    newEditor.getHtml = () => {
        if (newEditor.isEmpty()) {
            return ''
        }
        return getHtml()
    }
    return newEditor
}
// 注册插件
Boot.registerPlugin(withEmptyHtml);

</script>    


<template>
    <div style="border: 1px solid #ccc;width: 700px;">
        <Toolbar ref="editorData" style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />
        <Editor style="height: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" />
    </div>

    <UploadPhoto :is_show="is_show" @change="handleImgUrl"></UploadPhoto>
</template>

<style lang="less" scoped>
.icon-select {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .up-btn {
        display: flex;

        .el-button {
            margin-right: 15px;
        }
    }
}

.demo-tabs {

    .total-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .only-icon {
            width: 100px;
            border: 2px solid transparent;
            margin: 5px 20px 5px 20px;

            .img-title {
                font-size: 10px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }

        .selected {
            border-width: 2px;
            border-color: #5fb878;
        }
    }
}

.icon-page {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}
</style>